<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('后台管理')"/>
</head>
<body class="hold-transition skin-blue sidebar-mini layout-boxed">
<div class="wrapper">
    <th:block th:include="include :: headbar"/>
    <th:block th:include="include :: sidebar"/>
    <div class="content-wrapper">
        <section class="content-header">
            <h1>&nbsp;</h1>
            <ol class="breadcrumb">
                <li><a href="/index"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li><a href="#">商城管理</a></li>
                <li class="active">商品管理</li>
            </ol>
        </section>
        <section class="content">
            <div class="box box-solid">
                <form class="box-header with-border form-inline" id="form">
                    <input type="text" class="form-control input-sm" placeholder="名称" name="goodsName">
<!--                    <select class="form-control input-sm" id="recommend" name="recommend">-->
<!--                        <option value="">无</option>-->
<!--                        <option value="0">普通</option>-->
<!--                        <option value="1">推荐</option>-->
<!--                    </select>-->
                    <select class="form-control input-sm" id="classifyName" name="classifyId">
                        <option value=""> - 请选择 - </option>
                        <option th:each="classify : ${classifyList}" th:value="${classify.classifyId}"
                                th:text="${classify.classifyName}"></option>
                    </select>
                    <button type="button" class="btn btn-success btn-sm btn-flat" onclick="$.table.search('form')"><i class="fa fa-search"></i> 搜索</button>
<!--                    <button type="button" class="btn btn-success btn-sm btn-flat" onclick="search()"><i-->
<!--                            class="fa fa-search"></i> 搜索-->
<!--                    </button>-->
                </form>
                <div class="box-body">
                    <div class="btn-group-sm form-inline" id="toolbar" goods="group">
                        <button type="button" class="btn btn-success btn-sm btn-flat" onclick="$.operate.addPage()"><i
                                class="fa fa-plus"></i> 添加
                        </button>
                        <button type="button" class="btn btn-primary btn-sm btn-flat" onclick="$.operate.editPage()"><i
                                class="fa fa-edit"></i> 修改
                        </button>
                        <button type="button" class="btn btn-danger btn-sm btn-flat" onclick="$.operate.remove()"><i
                                class="fa fa-remove"></i> 删除
                        </button>
                    </div>
                    <table id="bootstrap-table" data-mobile-responsive="true"></table>
                </div>
            </div>
        </section>

        <div id="outerdiv"
             style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
            <div id="innerdiv" style="position:absolute;">
                <img id="bigimg" style="border:5px solid #fff;" src=""/>
            </div>
        </div>
        <div id="showImage" class="modal hide">
            <div class="modal-header">
                <button data-dismiss="modal" class="close" type="button"></button>
            </div>
            <div class="modal-body">
                <div id="img_show">
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: copyright"/>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var prefix = "/mall/goods";
    $(function () {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + '/add',
            removeUrl: prefix + '/remove',
            updateUrl: prefix + '/edit/{id}',
            sortName: "",
            uniqueId: 'goodsId',
            modalName: "",
            modalWidth: 900,
            modalHeight: 500,
            columns: [
                {checkbox: true},
                {field: 'goodsId', title: 'ID'},
                {field: 'mainImage', title: '图片', formatter: imgFmt, events: 'operateEvents'},
                {field: 'goodsName', title: '名称'},
                {field: 'price', title: '当前价格'},
                {field: 'originalPrice', title: '原价'},
                {field: 'volume', title: '销量'},
                {field: 'classifyName', title: '分类'},
                {title: '上架/下架', align: 'center', formatter: statusFormatter}
            ]
        };
        $.table.init(options);
        $('#bootstrap-table').bootstrapTable({
            onDblClickRow: function (row) {
                console.log("click:" + row)
            }
        });
        // $(".pic").click(function () {
        //     console.log("get you in");
        //     var _this = $(this);//将当前的img元素作为_this传入函数
        //     imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
        // });
    });

    function imgFmt(value, row, index) {
        return '<a class = "view"  href="javascript:void(0)"><img src="' + value + '" width="26px"/></a>';
        // return '<img class="pic" src="' + value + '" width="26px"/>';
    }

    function search() {
        var form = $("#form");
        $.get(prefix + "/search", {
            "keywords": form.find("input").val(),
            "recommend": $("#recommend").val(),
            "category": $("#classifyName").val()
        }, function (resp) {
            if (resp.code === 0) {
                return resp.data;
            } else {
                $.table.refresh();
            }

        });
    }

    window.operateEvents = {
        'click .view': function (e, value, row, index) {
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                area: 'auto',
                skin: 'layui-layer-nobg', //没有背景色
                shadeClose: true,
                content: '<img class="img-xys" ' +
                    'style="height: auto;display: inline-block;max-width: 100%;max-height: 100%;vertical-align: bottom;bottom: 0; -o-object-fit: fill; object-fit: fill;"  ' +
                    'src="' + value + '"/>'
            });
        }
    };

    function statusFormatter(value, row, index) {
        if (row.status === "1") {
            return '<i class=\"fa fa-toggle-on text-info fa-lg\" onclick="disable(\'' + row.goodsId + '\')"></i> ';
        } else {
            return '<i class=\"fa fa-toggle-off text-info fa-lg\" onclick="enable(\'' + row.goodsId + '\')"></i> ';
        }
    }

    function disable(goodsId) {
        $.post(prefix + "/changeStatus", {"goodsId": goodsId, "status": 0}, function (resp) {
            $.table.refresh();
        });
    }

    function enable(goodsId) {
        $.post(prefix + "/changeStatus", {"goodsId": goodsId, "status": 1}, function (resp) {
            $.table.refresh();
        });
    }

    function imgShow(outerdiv, innerdiv, bigimg, _this) {
        var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
        $(bigimg).attr("src", src);//设置#bigimg元素的src属性
        /*获取当前点击图片的真实大小，并显示弹出层及大图*/
        $("<img/>").attr("src", src).load(function () {
            var windowW = $(window).width();//获取当前窗口宽度
            var windowH = $(window).height();//获取当前窗口高度
            var realWidth = this.width;//获取图片真实宽度
            var realHeight = this.height;//获取图片真实高度
            var imgWidth, imgHeight;
            var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放
            if (realHeight > windowH * scale) {//判断图片高度
                imgHeight = windowH * scale;//如大于窗口高度，图片高度进行缩放
                imgWidth = imgHeight / realHeight * realWidth;//等比例缩放宽度
                if (imgWidth > windowW * scale) {//如宽度扔大于窗口宽度
                    imgWidth = windowW * scale;//再对宽度进行缩放
                }
            } else if (realWidth > windowW * scale) {//如图片高度合适，判断图片宽度
                imgWidth = windowW * scale;//如大于窗口宽度，图片宽度进行缩放
                imgHeight = imgWidth / realWidth * realHeight;//等比例缩放高度
            } else {//如果图片真实高度和宽度都符合要求，高宽不变
                imgWidth = realWidth;
                imgHeight = realHeight;
            }
            $(bigimg).css("width", imgWidth);//以最终的宽度对图片缩放
            var w = (windowW - imgWidth) / 2;//计算图片与窗口左边距
            var h = (windowH - imgHeight) / 2;//计算图片与窗口上边距
            $(innerdiv).css({"top": h, "left": w});//设置#innerdiv的top和left属性
            $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
        });
        $(outerdiv).click(function () {//再次点击淡出消失弹出层
            $(this).fadeOut("fast");
        });
    }
</script>
</body>
</html>
